<template>
  <div>
    <!-- 日期选择和操作按钮 -->
    <el-card class="card">
      <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="时间选择" class="form-item-label">
          <el-date-picker
              v-model="queryParams.dateRange"
              size="small"
              class="date-picker"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="card">
      <!-- 合计收入显示 -->
      <span class="amount-title">合计收入:</span> <span class="amount">{{ itemAmount }} ￥</span>
    </el-card>
    <el-card class="card">
      <!-- 收支概况显示 -->
      <div class="overview">
        <span class="amount-title">收支概况:</span>
        <span class="amount">总收入: {{ itemAmount }} ￥</span>
        <span class="amount refund">总退款: {{ totalRefund }} ￥</span>
      </div>
    </el-card>
    <el-card class="card">
      <div class="details">
        <span class="amount-title">收支详情:</span>
        <span class="amount">现金收入: {{ xianjinAmount }} ￥</span>
        <span class="amount">支付宝收入: {{ zhifubaoAmount }} ￥</span>
        <span class="amount">微信收入: {{ weixinAmount }} ￥</span>
        <span class="amount refund">现金退费: {{ xianjin }} ￥</span>
        <span class="amount refund">支付宝退费: {{ zhifubao }} ￥</span>
        <span class="amount refund">微信退费: {{ weixin }} ￥</span>
      </div>
    </el-card>
    <!-- 图表容器 -->
    <div class="chart-container">
      <!-- 收支概况饼状图 -->
      <div ref="myChart" class="chart-item"></div>
      <!-- 收支详情饼状图 -->
      <div ref="myCharts" class="chart-item"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      // 总收入
      itemAmount: 0,
      // 合并的总退费
      totalRefund: 0,
      // 现金收入
      xianjinAmount: 0,
      // 支付宝收入
      zhifubaoAmount: 0,
      // 微信收入
      weixinAmount: 0,
      // 现金退费
      xianjin: 0,
      // 支付宝退费
      zhifubao: 0,
      // 微信退费
      weixin: 0,
      queryParams: {
        dateRange: []
      },
      chart1: null,
      chart2: null,
    };
  },
  created() {
    // 初始化时调用以加载数据
    this.handleQuery();
  },
  mounted() {
    // 页面加载后初始化图表
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 初始化收支概况和收支详情的图表
      this.chart1 = echarts.init(this.$refs.myChart);
      this.chart2 = echarts.init(this.$refs.myCharts);
      this.updateChart1();
      this.updateChart2();
    },
    async ZongShouRu() {
      // 获取第一个总收入数据
      try {
        const response = await this.$http.post('/statistics/orderChargeItem/list', this.queryParams);
        return response.data.data[0]?.itemAmount || 0;
      } catch (error) {
        return 0;
      }
    },
    async ZongShouRuTwo() {
      // 获取第二个总收入详情
      try {
        const response = await this.$http.post('/statistics/registration/listZSR', this.queryParams);
        return response.data.data[0]?.itemAmount || 0;
      } catch (error) {
        return 0;
      }
    },
    async handleQuery() {
      // 获取总收入数据
      try {
        const [totalIncome, additionalIncome] = await Promise.all([this.ZongShouRu(), this.ZongShouRuTwo()]);
        this.itemAmount = totalIncome + additionalIncome; // 合并总收入

        const [totalRefund1, totalRefund2] = await Promise.all([this.ZongTuiFei(), this.ZongTuiFeiTwo()]);
        this.totalRefund = totalRefund1 + totalRefund2; // 合并总退费

        await Promise.all([this.ShouZhiXiangQing(), this.TuiFeiXiangQing()]);
        this.updateChart1(); // 更新收支概况图表
        this.updateChart2(); // 更新收支详情图表
      } catch (error) {
        this.itemAmount = 0;
        this.totalRefund = 0;
      }
    },
    async ZongTuiFei() {
      // 获取第一个总退费数据
      try {
        const response = await this.$http.post('/statistics/orderBackFee/list', this.queryParams);
        return response.data.data[0]?.backAmount || 0;
      } catch (error) {
        return 0;
      }
    },
    async ZongTuiFeiTwo() {
      // 获取第二个总退费数据
      try {
        const response = await this.$http.post('/statistics/registration/listZTF', this.queryParams);
        return response.data.data[0]?.backAmount || 0;
      } catch (error) {
        return 0;
      }
    },
    async ShouZhiXiangQing() {
      // 获取第一个收支详情数据
      try {
        const response = await this.$http.post('/statistics/orderChargeItem/ListOrder', this.queryParams);
        this.xianjinAmount = response.data.data[0]?.xianjinAmount || 0;
        this.zhifubaoAmount = response.data.data[0]?.zhifubaoAmount || 0;
        this.weixinAmount = response.data.data[0]?.weixinAmount || 0;

        // 加上第二个收支详情的微信支付金额
        const weixinAmountTwo = await this.ShouZhiXiangQingTwo();
        this.weixinAmount += weixinAmountTwo;
      } catch (error) {
        this.xianjinAmount = 0;
        this.zhifubaoAmount = 0;
        this.weixinAmount = 0;
      }
    },
    async ShouZhiXiangQingTwo() {
      // 获取第二个收支详情数据
      try {
        const response = await this.$http.post('/statistics/registration/listWXSR', this.queryParams);
        return response.data.data[0]?.weixinAmount || 0;
      } catch (error) {
        return 0;
      }
    },
    async TuiFeiXiangQing() {
      // 获取退费详情数据
      try {
        const response = await this.$http.post('/statistics/orderBackFee/ListBack', this.queryParams);
        this.xianjin = response.data.data[0]?.xianjin || 0;
        this.zhifubao = response.data.data[0]?.zhifubao || 0;
        this.weixin = response.data.data[0]?.weixin || 0;

        const weixinTwo =await this.TuiFeiXiangQingTwo();
        this.weixin += weixinTwo;
      } catch (error) {
        this.xianjin = 0;
        this.zhifubao = 0;
        this.weixin = 0;
      }
    },
    async TuiFeiXiangQingTwo() {
      // 获取第二个退费详情数据
      try {
        const response = await this.$http.post('/statistics/registration/listWXTF', this.queryParams);
        return response.data.data[0]?.weixin || 0;
      } catch (error) {
        return 0;
      }
    },
    resetQuery() {
      // 重置查询参数并重新加载数据
      this.queryParams = { dateRange: [] };
      this.handleQuery();
    },
    async updateChart1() {
      // 更新收支概况饼状图
      if (!this.chart1) return;

      const option = {
        title: {
          text: '收支概况',
          subtext: '总收入与退费',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '收入/退费',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.itemAmount, name: '总收入' },
              { value: this.totalRefund, name: '总退款' } // 使用合并的总退费
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chart1.setOption(option);
    },
    async updateChart2() {
      // 更新收支详情饼状图
      if (!this.chart2) return;

      const option = {
        title: {
          text: '收支详情',
          subtext: '各类收入与退费',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '收入/退费',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.xianjinAmount, name: '现金收入' },
              { value: this.zhifubaoAmount, name: '支付宝收入' },
              { value: this.weixinAmount, name: '微信收入' }, // 使用合并后的微信收入
              { value: this.xianjin, name: '现金退费' },
              { value: this.zhifubao, name: '支付宝退费' },
              { value: this.weixin, name: '微信退费' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chart2.setOption(option);
    },
  }
};
</script>



<style>
.card {
  margin-bottom: 15px; /* 减少卡片之间的间距 */
  padding: 15px; /* 减少卡片内边距 */
  border-radius: 6px; /* 减小圆角边框 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  background: #fff; /* 卡片背景颜色 */
}

.date-picker {
  width: 240px; /* 日期选择器宽度 */
  border-radius: 6px; /* 与卡片一致的圆角 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  background: #fff; /* 背景颜色 */
}

.date-picker .el-input__inner,
.date-picker .el-picker__input {
  font-size: 14px; /* 调整字体大小 */
  color: #333; /* 调整字体颜色 */
}

.date-picker .el-input__inner::placeholder,
.date-picker .el-picker__input::placeholder {
  font-size: 14px; /* 占位符字体大小 */
  color: #999; /* 占位符字体颜色 */
}

.date-picker .el-picker-panel {
  font-size: 14px; /* 日期选择面板字体大小 */
}

.form-item-label {
  font-size: 14px; /* 与其他标题一致的字体大小 */
  font-weight: bold; /* 加粗字体 */
  color: #333; /* 标题颜色 */
}

.amount-title {
  font-size: 14px; /* 减小字体大小 */
  font-weight: bold;
  margin-right: 8px; /* 字与字之间的间距 */
}

.amount {
  font-size: 14px; /* 减小字体大小 */
  color: #333; /* 标准金额颜色 */
  margin-right: 12px; /* 字与字之间的间距 */
}

.refund {
  color: red; /* 退费金额的颜色 */
}

.details {
  font-size: 14px; /* 减小字体大小 */
}

.chart-container {
  display: flex;
  justify-content: space-between; /* 图表之间的间隔 */
  align-items: flex-start; /* 让图表在容器内对齐到顶部 */
  gap: 15px; /* 图表之间的间隔，保持一致性 */
  margin-top: 15px; /* 图表上方间距 */
}

.chart-item {
  flex: 1; /* 让图表占用容器内的可用空间 */
  min-width: 0; /* 确保图表不会溢出容器 */
  max-width: 100%; /* 确保图表不会超过容器宽度 */
  height: 300px; /* 减小图表的高度 */
  border-radius: 6px; /* 减小圆角边框 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  background: #fff; /* 图表背景颜色 */
}
</style>



